<template>
  <div class="tab-con">
    <template v-for="(item, index) in btnTabData">
      <div
        class="tab"
        :key="index"
        @click="tabHandler(item, index)"
        :style="{
          'border-bottom': activeTab === index ? '4px solid #0d48ce' : '',
        }"
      >
        {{ item.label }}
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "BaseTab",
  data() {
    return {};
  },
  props: {
    btnTabData: {
      type: Array,
      required: true,
    },
    activeTab: {
      type: Number,
      required: true,
    },
  },
  computed: {
    hasAuth() {
      return "";
    },
  },
  created() {},
  methods: {
    tabHandler(item, index) {
      this.$emit("tab-handler", item, index);
    },
    handleOver() {},
    handleOut() {},
  },
};
</script>

<style lang="scss" scoped>
.tab-con {
  display: flex;
  .tab {
    height: 57px;
    margin-right: 40px;
    font-size: 18px;
    cursor: pointer;
  }
}
</style>
